<template>
  <a-layout>
    <a-card title="场景列表" bordered>
      <a-table
        :columns="columns"
        :dataSource="scenes"
        rowKey="name"
        :pagination="pagination"
        @change="handlechange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="editScene(record)">编辑</a-button>
            <a-button type="link" @click="deleteScene(record)">删除</a-button>
          </template>
        </template>
      </a-table>
      <a-button type="primary" @click="showAddModal" style="margin-top: 16px"
        >新增场景</a-button
      >
    </a-card>
    <a-modal
      v-model:open="modalVisible"
      :title="isEditing ? '编辑场景' : '新增场景'"
      @cancel="cancelModal"
      :footer="null"
    >
      <a-form :model="form" @finish="handleModalSubmit" layout="vertical">
        <a-form-item label="场景名称">
          <a-input v-model:value="form.scenariosName" :disabled="isEditing" />
        </a-form-item>
        <a-form-item label="初始值">
          <a-input v-model:value="form.initialValue" />
        </a-form-item>
        <a-form-item label="最小波动范围">
          <a-input v-model:value="form.minVariation" />
        </a-form-item>
        <a-form-item label="最大波动范围">
          <a-input v-model:value="form.maxVariation" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleModalSubmit">保存</a-button>
          <a-button @click="cancelModal" style="margin-left: 8px">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { scenemanagement } from "/@/api/Carbon module/Carbon accounting module/Carbon prediction/scenemanagement";
import { smartSentry } from "/@/lib/smart-sentry";

const scenes = ref([]);
const queryFormState = reactive({
  pageNum: 1,
  pageSize: 10,
});
const queryForm = reactive({ ...queryFormState });
const total = ref(0); //总数
const tableLoading = ref(false);
const pagination = computed(() => ({
  total: total.value,
  pageSize: queryFormState.pageSize,
  current: queryFormState.pageNum,
  showTotal: (total) => `总共${total}项`,
}));

const columns = [
  { title: "id", dataIndex: "scenariosId" },
  { title: "场景名称", dataIndex: "scenariosName" },
  { title: "场景描述", dataIndex: "scenariosDescription" },
  { title: "初始值", dataIndex: "initialValue" },
  { title: "最小波动范围", dataIndex: "minVariation" },
  { title: "最大波动范围", dataIndex: "maxVariation" },
  { title: "记录创建时间", dataIndex: "createdAt" },
  { title: "记录更新时间", dataIndex: "updatedAt" },
  { title: "操作", dataIndex: "action", key: "action" },
];
const form = reactive({
  scenariosName: "",
  scenariosDescription: "",
  initialValue: "",
  minVariation: "",
  maxVariation: "",
  createdAt: "",
  updatedAt: "",
});

const modalVisible = ref(false);
const editingScene = ref(null);
const isEditing = computed(() => !!editingScene.value);
async function queryData() {
  tableLoading.value = true;
  try {
    queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
    queryForm.pageSize = queryFormState.pageSize;
    let queryResult = await scenemanagement.query(queryForm);
    scenes.value = queryResult.data.list;
    total.value = queryResult.data.total;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}
const editScene = (scene) => {
  editingScene.value = scene;
  form.scenariosName = scene.scenariosName;
  form.scenariosDescription = scene.scenariosDescription;
  form.initialValue = scene.initialValue;
  form.minVariation = scene.minVariation;
  form.maxVariation = scene.maxVariation;
  modalVisible.value = true;
};

const deleteScene = async (record) => {
  try {
    await scenemanagement.DElete(record.scenariosId);
    queryData();
  } catch (error) {
    console.log(error);
  }
};

const showAddModal = () => {
  editingScene.value = null;
  form.scenariosName = "";
  form.scenariosDescription = "";
  form.initialValue = null;
  form.minVariation = null;
  form.maxVariation = null;
  modalVisible.value = true;
};

const handleModalSubmit = async () => {
  let result;
  try {
    if (isEditing.value) {
      // 编辑模式，调用编辑接口
      result = await scenemanagement.Edit({
        scenariosId: editingScene.value.scenariosId, // 传递场景ID
        ...form, // 其余表单字段
      });
    } else {
      // 新增模式，调用新增接口
      result = await scenemanagement.Add(form);
    }
    queryData(); // 刷新列表数据
  } catch (error) {
    console.log(error); // 错误处理
  } finally {
    modalVisible.value = false; // 关闭模态框
    editingScene.value = null; // 清除编辑记录
  }
};

const handlechange = (pagination, filters, sorter) => {
  queryFormState.pageNum = pagination.current; // 更新当前页
  queryFormState.pageSize = pagination.pageSize; // 更新页大小
  queryData();
};
const cancelModal = () => {
  modalVisible.value = false;
  editingScene.value = null;
};
onMounted(() => {
  queryData();
});
</script>

<style scoped>
a-card {
  border-radius: 8px;
}
a-button {
  border-radius: 4px;
}
a-input,
a-input-number {
  border-radius: 4px;
}
a-form-item {
  margin-bottom: 16px;
}
</style>
